<template>
	<view class="tui-center">
		<uni-nav-bar fixed left-icon="back" title="收藏" :rightText="list.length != 0 ? rightText : ''"
		             @clickLeft="clickLeft()"
		             @right="clickRight(flag)"
		></uni-nav-bar>
		<view class="favorite" v-if="list.length == 0">
			<text>暂无收藏</text>
		</view>
		<view class="tui-align-center" v-else>
			<block v-for="(item, index) in list" :key="index">
				<view class="tui-align br-b">
					<view class="tui-flex">
						<view class="tui-pd-right">
							<uni-icons
									v-if="showChecked"
									class="checkbox"
									type="checkbox-filled"
									:color="item.checked? '#11a5eb': '#C0C4CC'"
									size="44"
									@click="check('item', index, item)"></uni-icons>
						</view>
						<view class="tui-align-image">
							<image class="tui-align-image-fill" :src="item.url" mode=""></image>
						</view>
						<view class="tui-filled">
							<view class="tui-filled-title">
								<text>{{ item.productName }}</text>
							</view>
							<view class="tui-filled-pric">
								<text class="tui-filled-prics">¥{{ item.pric }}</text>
								<del style="color: #999;font-size: 26rpx;">¥{{ item.del }}</del>
							</view>
						</view>
					</view>
				</view>
				<view class="tui-btn" v-if="showChecked">
					<button class="btn-fixed" @tap="delTo">删除</button>
				</view>
			</block>
		</view>




	</view>
</template>

<script>
	import uniIcons from '@/components/uni-icons/uni-icons.vue'
	
	export default {
		name: 'collection',
		components: {
			uniIcons
		},
		data() {
			return {
				showChecked: false,
				list: [],
                dateForm: {
                    pageNum: 1,
                    pageSize: 5
                },
                rightText: '编辑',
                flag: 0,
                ids: []
			}
		},
		onLoad() {
			this.getList()
		},
		methods: {
			check(type, index, item) {
				if(type === 'item'){
					this.list[index].checked = !this.list[index].checked;
					if (this.list[index].checked) {
                        this.ids.push(item.id)
                        console.log('true==  ' + this.ids)
					} else {
						let index = this.ids.indexOf(item.id)
                        this.ids = this.ids.splice(index, 1)
                        console.log('false==  ' + this.ids)
					}
				}else{
					const list = this.list;
					list.forEach(item=>{
						item.checked = checked;
                        console.log(item.id)
					})
				}
			},
            clickRight(flag) {
                if (flag == 0) {
                    this.showChecked = true
                    this.rightText = '取消'
                    this.flag = 1
                } else {
                    this.showChecked = false
                    this.rightText = '编辑'
                    this.flag = 0
                }
            },
            //  删除
            delTo() {
                let item = this.ids.join(',')
	            console.log(item)
                this.$api.api('favorite.del', { ids: item }).then(res => {
                    this.getList()
                }).catch(error => {
                    this.$api.msg(error.message)
                });
            },
			async getList() {
				// this.list = await this.$api.json('collectionList')
                this.$api.api('favorite.list', this.dateForm).then(res => {
                    this.list = res.data.list
                }).catch(error => {
                    this.$api.msg(error.message)
                });
			},
			onNavigationBarButtonTap(e) {
				const index = e.index
				if(index == 0) {
					this.showChecked = true
				}
			},
            clickLeft() {
                uni.navigateBack()
            }
		}
	}
</script>

<style lang="scss">
	.tui-align-center {
		padding-top: $uni-spacing-row-base;
		.tui-align {
			padding: $uni-spacing-row-lg 20rpx;
			background-color: #fff;
			.tui-flex {
				/*align-items: flex-start;*/
				.tui-align-image {
					position: relative;
					width: 180rpx;
					height: 140rpx;
					padding-right: $uni-spacing-row-base;
					.tui-align-image-fill {
						width: 100%;
						height: 100%;
					}
					.checkbox {
						position: absolute;
						left: -12rpx;
						top: -16rpx;
						background: #fff;
						border-radius: 50px;
						padding: 4rpx;
						z-index: 8;
						line-height: 1;
					}
				}
				.tui-filled {
					.tui-filled-title {
						// font-size: 28rpx;
						font-weight: 600;
					}
					.tui-filled-pric {
						padding-top: $uni-spacing-row-base;
						.tui-filled-prics {
							padding-right: 10rpx;
							font-size: $uni-font-size-lg + 4rpx;
							font-weight: bold;
							color: $uni-color-warning;
						}
					}
				}
			}
		}
	}
	.tui-btn {
		position: fixed;
		width: 100%;
		bottom: 0;
		.btn-fixed{
			background: $uni-color-error;
			color: $uni-text-color-inverse;
		}
	}
	.favorite {
		text-align: center;
		padding: 15px;
		color: #999;
	}
</style>
